<template>
    <div class="shop-preview">
        <div class="tip-line">
            <cell-tip tip="每次修改底部导航后，需要提交小程序审核通过后即可生效" />
        </div>

        <div class="preview-head">
            <div class="preview-head__text">店铺主页</div>
        </div>
        <!-- 放置首页样式 -->
        <div class="preview-body"></div>
        <div class="preview-foot flexs">
            <div :class="[{ 'nav-active': cur === index }, 'nav-item']" v-for="(item, index) in navs" :key="index">
                <el-image :src="cur === index ? item.selectedIconPath : item.iconPath" fit="cover" v-if="item.iconPath" />
                <p class="nav-text" :style="{ color: cur === index ? selectedColor : color }">{{ item.text }}</p>
            </div>
        </div>
    </div>
    <div class="preview-edit">
        <div class="preview-edit__head">
            <div class="preview-edit__head-one flexs">
                <p>底部导航</p>
            </div>
            <div class="preview-edit__head-dec">方便用户在小程序页面中快速切换，精准定位您想要显示的页面，每一次修改都须重新提交审核发布才能及时更新。</div>
        </div>
        <div class="hot-box">
            <div class="preview-color__box">
                <p class="hot-item__title" style="display: flex;align-items: center;">全局配置<el-popover
                        placement="right-start" :width="200" trigger="hover" content="可自定义修改小程序底部导航菜单，修改好后必须重新审核发布才能生效">
                        <template #reference>
                            <el-icon color="#C1C1C1" :size="18">
                                <QuestionFilled />
                            </el-icon>
                        </template>
                    </el-popover></p>
                <div class="preview-color flexs">
                    <p class="preview-color__text">未选中文字颜色</p>
                    <el-color-picker v-model="color" @change="changeColor" />
                </div>
                <div class="preview-color flexs">
                    <p class="preview-color__text">选中时文字颜色</p>
                    <el-color-picker v-model="selectedColor" @change="changeSelectedColor" />
                </div>
            </div>
            <div class="hot-item">
                <p class="hot-item__title">导航配置</p>
                <div class="hot-item__subtitle">
                    <p>可拖动排序</p>
                    <p>最多配置 <span>4</span> 个导航菜单</p>
                    <p>首页/分类/购物车/我的菜单不支持删除，其中首页/我的菜单不支持排序</p>
                </div>
                <!-- 导航 -->
                <div class="better-list">
                    <draggable v-model="navs" item-key="item" animation="200" :move="checkMove">
                        <template #item="{ element, index }">
                            <div class="better-item">
                                <div class="better-item__one flexs">
                                    <p class="better-item__left">导航名称</p>
                                    <div class="better-item__right">
                                        <el-input v-model="element.text" maxlength="4" clearable
                                            placeholder="输入导航名称，最多4个字" />
                                    </div>
                                </div>
                                <div class="better-item__one flexs">
                                    <p class="better-item__left">跳转链接</p>
                                    <div class="better-item__right">
                                        <p class="better-item__home" v-if="element.id">
                                            {{ element.urlText }}
                                            <el-tooltip content="不支持修改链接" placement="top">
                                                <el-icon color="#9c9c9c" size="16px">
                                                    <QuestionFilled />
                                                </el-icon>
                                            </el-tooltip>
                                        </p>
                                        <p class="better-link__text" @click.stop="clickLink(element)"
                                            v-if="element.urlText == '' && !element.id">
                                            选择链接页面<el-icon>
                                                <ArrowDown />
                                            </el-icon>
                                        </p>
                                        <div class="better-link__active flexs"
                                            v-if="element.urlText != '' && !element.id">
                                            <div class="better-link__active-info flexs">
                                                <p class="better-link__active-name line-one">{{ element.urlText }}</p>
                                                <el-icon @click.stop="clearLink(element)">
                                                    <CloseBold />
                                                </el-icon>
                                            </div>
                                            <p class="better-link__text" @click.stop="clickLink(element)">
                                                修改<el-icon>
                                                    <ArrowDown />
                                                </el-icon>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="better-item__one flexs" style="align-items: flex-start">
                                    <p class="better-item__left">导航图标</p>
                                    <div class="better-item__right better-img-box">
                                        <div class="better-img" @click.stop="clickImg(element, index, 1)">
                                            <el-image :src="element.iconPath" fit="cover" />
                                            <span class="better-img__tip">更换</span>
                                        </div>
                                        <div class="better-img" @click.stop="clickImg(element, index, 2)">
                                            <el-image :src="element.selectedIconPath" fit="cover" />
                                            <span class="better-img__tip">更换</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="item-delete" @click="deleteNav(index)" v-if="!element.id">
                                    <el-icon color="#bbb" size="20px">
                                        <CircleCloseFilled />
                                    </el-icon>
                                </div>
                            </div>
                        </template>
                    </draggable>
                </div>
                <!-- <div class="hot-item__add flexs-center" @click.stop="addNav" v-if="navs.length < 5">
                    <el-icon color="#4B93FA">
                        <Plus />
                    </el-icon>添加导航（{{ navs.length }}/5）
                </div> -->
            </div>
        </div>
    </div>

    <!-- 选择页面 -->
    <el-dialog class="dialog-pages" v-model="dialogPage" title="选择页面" width="800px" top="10vh" :append-to-body="true"
        :destroy-on-close="true">
        <el-table class="table-mb" :data="pageFunArrs" :header-cell-style="{ background: '#F5F7FA' }"
            element-loading-background="rgba(255, 255, 255, 0.6)">
            <el-table-column prop="title" label="页面名称"></el-table-column>
            <el-table-column label="操作" width="120" class-name="operation-nav" fixed="right">
                <template #default="scope">
                    <p class="link-p" :style="{ color: scope.row.show ? '#4B93FA' : '#646566' }"
                        @click.stop="scope.row.show ? '' : handleFunSelect(scope.row, scope.$index)">
                        {{ scope.row.show ? "已选" : "选择页面" }}
                    </p>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>

    <!-- 图片库 -->
    <picture-library :show="showImg" :select_multiple="false" @close="showImg = false" @select="selectImg">
    </picture-library>

    <div class="foot-btn flexs-center">
        <el-button type="primary" size="large" :loading="btn_loading" @click="handleConfirm">保存</el-button>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted } from "vue"
import { CircleCloseFilled, QuestionFilled, CloseBold, ArrowDown } from "@element-plus/icons-vue"
import CellTip from "@components/cell-tip.vue"
import PictureLibrary from "@components/PictureLibrary.vue"
import draggable from "vuedraggable"

const { proxy } = getCurrentInstance()

onMounted(() => {
    getConfigs()
})

function getConfigs() {
    proxy.$axios.get('decorate/nav').then(res => {
        if (res.data.code == 0) {
            let result = res.data.data.style
            for (let i = 0; i < result.navs.length; i++) {
                result.navs[i].id = i + 1
            }
            navs.value = result.navs
            color.value = result.color
            selectedColor.value = result.selectedColor

            pageFunArrs.value.map((item) => {
                let index = result.navs.findIndex((sub) => sub.pagePath === item.url)
                item.show = index > -1
            })
        } else {
            proxy.$message({message:res.data.msg,type:"error"})
        }
    }).catch(err => { })
}

// 保存
const btn_loading = ref(false)
const handleConfirm = () => {
    let objs = {
        color: color.value,
        selectedColor: selectedColor.value,
        navs: navs.value,
    }
    btn_loading.value = true
    proxy.$axios.post('decorate/nav', {
        style: JSON.stringify(objs)
    }).then(res => {
        btn_loading.value = false
        if (res.data.code == 0) {
            proxy.$message({ message: "保存成功！", type: "success" })
        } else {
            proxy.$message({message:res.data.msg,type:"error"})
        }
    }).catch(err => {
        btn_loading.value = false
    })
}

/**
 * 导航栏
 */
const cur = ref(0)
const navs = ref([
    {
        id: 1,
        urlText: "首页",
        pagePath: "pages/index/index",
        text: "首页",
        iconPath: "https://saas.huashushop.com/saas/img/a1.png",
        selectedIconPath: "https://saas.huashushop.com/saas/img/a2.png",
    },
    {
        id: 2,
        urlText: "分类",
        pagePath: "pages/classify/classify",
        text: "分类",
        iconPath: "https://saas.huashushop.com/saas/img/a3.png",
        selectedIconPath: "https://saas.huashushop.com/saas/img/a4.png",
    },
    {
        id: 3,
        urlText: "购物车",
        pagePath: "pages/cart/cart",
        text: "购物车",
        iconPath: "https://saas.huashushop.com/saas/img/a5.png",
        selectedIconPath: "https://saas.huashushop.com/saas/img/a6.png",
    },
    {
        id: 4,
        urlText: "我的",
        pagePath: "pages/center/center",
        text: "我的",
        iconPath: "https://saas.huashushop.com/saas/img/a7.png",
        selectedIconPath: "https://saas.huashushop.com/saas/img/a8.png",
    },
])
const addNav = () => {
    navs.value.push({
        urlText: "",
        pagePath: "",
        text: "导航名称",
        iconPath: "",
        selectedIconPath: "",
    })
}
const deleteNav = (index) => {
    navs.value.splice(index, 1)
}

// 选择页面链接
const dialogPage = ref(false)
const linkItem = ref({})
const pageFunArrs = ref([
    {
        title: "分类",
        url: "pages/classify/classify",
        show: false,
    },
    // {
    //     title: "天天特惠",
    //     url: "pages/preferential/preferential",
    //     show: false,
    // },
    // {
    //     title: "秒杀列表",
    //     url: "/pages/seckill/seckill",
    //     show: false,
    // },
    {
        title: "常购清单",
        url: "pages/frequentlyPurchase/frequentlyPurchase",
        show: false,
    },
])
const handleFunSelect = (row, index) => {
    pageFunArrs.value.map((item) => {
        item.show = false
    })
    pageFunArrs.value[index].show = true
    linkItem.value.urlText = row.title
    linkItem.value.text = row.title
    linkItem.value.pagePath = row.url
    dialogPage.value = false
}
const clickLink = (item) => {
    linkItem.value = item
    dialogPage.value = true
}
const clearLink = (item) => {
    item.urlText = ""
    item.pagePath = ""
}

// 修改导航文字颜色
const color = ref("#9c9c9c")
const selectedColor = ref("#0AC393")
const changeColor = (val) => {
    navs.value.map((item) => {
        item.color = val ? val : "#9c9c9c"
    })
}
const changeSelectedColor = (val) => {
    navs.value.map((item) => {
        item.selectedColor = val ? val : "#0AC393"
    })
}

// 控制首页不能拖动，且不能移动顺序
const checkMove = (evt) => {
    if (evt.relatedContext.element.id === 1) return false
    if (evt.draggedContext.element.id === 1) return false
    if (evt.relatedContext.element.id === 4) return false
    if (evt.draggedContext.element.id === 4) return false
    return true
}

/**
 * 添加/更换图片
 * @param {Boolean} showImg 显示图片库
 * @param {Number} arr_index 数组索引
 * @param {Number} arr_type 1是未选中图片，2是选中图片
 * @param {Object} arr_item 数据项
 * @param {Function} clickImg 点击更换图片，
 * @param {Function} selectImg 选择图片
 */
const showImg = ref(false)
const arr_index = ref("")
const arr_type = ref("")
const arr_item = ref({})
const clickImg = (item, index, type) => {
    arr_item.value = item
    arr_type.value = type
    arr_index.value = index
    showImg.value = true
}
const selectImg = (val) => {
    showImg.value = false
    if (arr_type.value == 1) {
        arr_item.value.iconPath = proxy.imgUrl + val[0].photo
    } else {
        arr_item.value.selectedIconPath = proxy.imgUrl + val[0].photo
    }
}
</script>
<script>
export default {
    name: "DecoShopNav",
}
</script>

<style lang="less" scoped>
.better-link__text {
    line-height: @line-height-md;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: @themes;

    .el-icon {
        margin-left: @margin-base;
    }
}

.better-link__active {
    width: 100%;
    overflow: hidden;
    color: @themes;

    .better-link__active-info {
        flex: 1;
        border: 1px solid @themes;
        border-radius: @radius-sm;
        background-color: #e0edff;
        padding: 2px 4px;
        margin-right: @margin-sm;
        overflow: hidden;

        .better-link__active-name {
            flex: 1;
            margin-right: @margin-xs;
        }

        .el-icon {
            flex: none;
            cursor: pointer;
        }
    }
}

.table-mb {
    .link-p {
        cursor: pointer;
        font-size: @font-size-md;
        color: @gray-7;

        &:hover {
            color: @themes;
        }
    }

    .link-active {
        color: @themes;
        font-weight: bold;
    }
}

.tip-line {
    flex: none;
    width: 100%;
}

.shop-right {
    flex: 1;
    display: flex;
    align-items: flex-start;
    height: calc(100vh - 120px);

    .shop-preview {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        background-color: #fff;
        margin-right: @margin-sm;
        position: relative;
        flex-direction: column;
        height: calc(100vh - 120px);
        padding: @padding-mdl;
    }

    .preview-head {
        background: url("https://cdn.huashushop.com/tenant_593be52a46f869eea8b31d146d21de7a/album/202304/20230413_65a2bd95cd8296208c97245fb2d2e0a4.png") no-repeat center;
        
        background-size: cover;
        width: 375px;
        height: 64px;
        box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
        position: relative;

        .preview-head__text {
            width: 180px;
            margin: 0 auto;
            text-align: center;
            padding-top: 31px;
            font-size: 16px;
            font-weight: bold;
        }
    }

    .preview-body {
        position: relative;
        width: 375px;
        overflow: visible;
        background-color: #f9f9f9;
        box-shadow: 0px 0px 4px 0 rgb(0 0 0 / 10%);
        min-height: 480px;
    }

    .preview-foot {
        min-height: 1px;
        text-align: center;
        background-color: #fff;
        width: 375px;
        box-shadow: 0px -2px 8px 0 rgb(0 0 0 / 10%);
        overflow: hidden;
        height: 50px;

        .nav-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden;

            .el-image {
                width: 26px;
                height: 26px;
            }

            .nav-text {
                margin-top: 2px;
                font-size: @font-size-sm;
            }
        }
    }

    .preview-edit {
        flex: none;
        width: 376px;
        height: calc(100vh - 120px);
        background-color: #fff;
        overflow-y: auto;

        /*滚动条整体样式*/
        &::-webkit-scrollbar {
            /*高宽分别对应横竖滚动条的尺寸*/
            width: 4px;
            height: 1px;
        }

        /*滚动条里面小方块*/
        &::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: @gray-4;
        }

        /*滚动条里面轨道*/
        &::-webkit-scrollbar-track {
            border-radius: 10px;
            background: #f1f1f1;
        }

        .preview-edit__head {
            border-bottom: 1px solid #f2f4f6;
            padding: @padding-lg @padding-md;

            .preview-edit__head-one {
                font-size: 18px;
                font-weight: bold;
                color: @gray-8;
            }

            .preview-edit__head-dec {
                font-size: @font-size-md;
                color: @gray-6;
                margin-top: @margin-sm;
            }
        }
    }
}

.preview-color__box {
    margin-bottom: @margin-md;

    .preview-color__text {
        color: @gray-7;
    }

    .preview-color {
        margin-top: @margin-xs;
    }
}

.hot-box {
    padding: @padding-md @padding-md @padding-xl;

    .hot-item {
        padding: @padding-sm;
        border-bottom: 1px solid @gray-3;
        background-color: @gray-1;

        &:last-child {
            border: 0;
        }

        .hot-item__title {
            font-size: @font-size-md;
            color: @gray-8;
            margin-bottom: @margin-xs;
        }

        .hot-item__subtitle {
            font-size: @font-size-md;
            color: @gray-6;
            line-height: @line-height-md;
            margin-bottom: @margin-sm;

            span {
                color: @themes;
            }
        }
    }

    .better-list {
        margin-top: @margin-sm;
        border-radius: @radius-xs;

        &:first-child {
            margin-top: 0;
        }

        .better-item {
            box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.1);
            padding: @padding-sm @padding-md @padding-md;
            margin-bottom: @margin-sm;
            position: relative;
            background-color: #fff;

            .better-img-box {
                display: flex;
            }

            .better-img {
                flex: none;
                margin-right: 10px;
                position: relative;
                width: 50px;
                height: 50px;
                text-align: center;
                background-color: @gray-2;
                border: 1px solid #e5e5e5;
                cursor: pointer;
                overflow: hidden;

                .better-img__tip {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 20px;
                    line-height: 20px;
                    font-size: @font-size-sm;
                    color: #fff;
                    background: rgba(0, 0, 0, 0.5);
                    text-align: center;
                }
            }

            .better-item__one {
                font-size: @font-size-md;
                color: @gray-6;
                margin-top: @margin-sm;

                .better-item__left {
                    flex: none;
                    margin-right: @margin-mdl;
                }

                .better-item__right {
                    flex: 1;

                    .better-item__home {
                        color: @gray-8;
                        display: flex;
                        align-items: center;

                        .el-icon {
                            cursor: pointer;
                            margin-left: @margin-base;
                        }
                    }
                }
            }

            .item-delete {
                position: absolute;
                cursor: pointer;
                top: -8px;
                right: -8px;
                z-index: 4;
            }
        }
    }

    .hot-item__add {
        cursor: pointer;
        margin-top: @margin-sm;
        border-radius: @radius-xs;
        border: 1px solid @themes;
        background-color: #fff;
        color: @themes;
        font-size: @font-size-md;
        padding: @padding-xs @padding-md;
    }
}
</style>
<style lang="less">
.dialog-pages {
    .el-dialog__body {
        padding: 10px 20px 20px;
    }
}
</style>
